<template>
  <div class="more">
    <div class="header">
        <div class="left">
            <span @click="end">距离结束</span>
            <van-count-down :time="time">
                <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down>
        </div>
        <div class="right" @click="begin">
            <span style="display:block;">明日&nbsp;7:00</span>
            <span>即将开始</span>
        </div>
    </div>
    <van-card
    v-for="item in goodsList"
        :price="item.price"
        :title="item.title"
        :thumb="item.image"
    >
  <template #tags>
    <van-tag plain type="danger">限时</van-tag>
    <van-tag plain type="danger">秒杀</van-tag>
  </template>
  <template #footer>
    <van-button round type="danger" v-if="statusEnd" @click="toCommit(item)">抢购</van-button> 
    <div v-else>
      <van-button round type="success" v-if="item.state" @click="remind(item.id)">提醒我</van-button> 
      <van-button round type="primary" v-else @click="removeRemind(item.id)">取消提醒</van-button> 
    </div>
  </template>
</van-card>
  </div>
</template>

<script setup>
import { Toast } from 'vant';
import 'vant/es/toast/style';
import {ref} from 'vue'
import useMenuStore from '../../store/menu.js'
import {useRouter} from 'vue-router'
const router = useRouter()
const store = useMenuStore()

const time = ref(50000000000000)


let statusEnd = ref(true)

let goodsList = store.goodsList



const end = ()=>{
    goodsList = goodsList.reverse() 
    statusEnd.value = true
}
const begin = ()=>{
    goodsList = goodsList.reverse()
    statusEnd.value = false
}
const remind = (id)=>{
  const has = goodsList.find((item)=>item.id === id)
  if(has){
    has.state = false
    Toast.success('设置提醒成功');
  }
}
const removeRemind = (id)=>{
  const has = goodsList.find((item)=>item.id === id)
  if(has){
    has.state = true
    Toast.fail('已取消');
  }
}

const toCommit = (val)=>{
  store.addCommit(val)
  store.check=true
  router.push('/commit')
}
</script>


<style  scoped>
/* 倒计时 */
 .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }

  /* 顶部 */
  .header{
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #eee;
    padding:  20px 0;
  }
  .header .right span:nth-of-type(2){
    font-size: 14px;
    color: #999;
    margin-top: 6px;
  }

  /* 主体 */
.van-button{
    height: 30px;
    border-radius: 8px;
    color: #fff;
}
</style>